<template>
  <div class="welcome-container">
    <div class="welcome-content">
      <div class="welcome-header">
        <el-icon class="welcome-icon"><House /></el-icon>
        <h1>欢迎使用后台管理系统</h1>
        <p class="subtitle">{{ currentTime }}</p>
      </div>
      
      <el-row :gutter="20" class="quick-stats">
        <el-col :span="6" v-for="stat in quickStats" :key="stat.title">
          <el-card shadow="hover" class="stat-card">
            <el-icon :class="['stat-icon', stat.type]">
              <component :is="stat.icon" />
            </el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ stat.value }}</div>
              <div class="stat-title">{{ stat.title }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="quick-actions">
        <el-col :span="8" v-for="action in quickActions" :key="action.title">
          <el-card 
            shadow="hover" 
            class="action-card"
            @click="router.push(action.path)"
          >
            <el-icon class="action-icon">
              <component :is="action.icon" />
            </el-icon>
            <h3>{{ action.title }}</h3>
            <p>{{ action.desc }}</p>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores'
import { House, User, Setting, Menu, Document } from '@element-plus/icons-vue'
import dayjs from 'dayjs'

const router = useRouter()
const authStore = useAuthStore()
const currentTime = ref('')

// 快速统计数据
const quickStats = [
  { title: '用户总数', value: '1,234', icon: 'User', type: 'primary' },
  { title: '角色数量', value: '12', icon: 'Setting', type: 'success' },
  { title: '菜单数量', value: '56', icon: 'Menu', type: 'warning' },
  { title: '今日访问', value: '888', icon: 'Document', type: 'danger' }
]

// 快捷操作
const quickActions = [
  {
    title: '用户管理',
    desc: '管理系统用户信息',
    icon: 'User',
    path: '/system/user'
  },
  {
    title: '角色管理',
    desc: '分配用户角色和权限',
    icon: 'Setting',
    path: '/system/role'
  },
  {
    title: '菜单管理',
    desc: '配置系统菜单结构',
    icon: 'Menu',
    path: '/system/menu/list'
  }
]

// 更新当前时间
const updateTime = () => {
  const hour = dayjs().hour()
  let greeting = '早上好'
  if (hour >= 12 && hour < 18) {
    greeting = '下午好'
  } else if (hour >= 18) {
    greeting = '晚上好'
  }
  currentTime.value = `${greeting}，${authStore.user?.username || '管理员'}，欢迎回来`
}

onMounted(() => {
  updateTime()
  setInterval(updateTime, 1000 * 60) // 每分钟更新一次
})
</script>

<style scoped>
.welcome-container {
  padding: 20px;
  height: 100%;
  background-color: var(--el-bg-color);
}

.welcome-content {
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px;
}

.welcome-icon {
  font-size: 48px;
  color: var(--el-color-primary);
  margin-bottom: 16px;
}

.subtitle {
  color: var(--el-text-color-secondary);
  font-size: 16px;
  margin-top: 8px;
}

.quick-stats {
  margin-bottom: 40px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
}

.stat-icon {
  font-size: 36px;
  margin-right: 16px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 4px;
}

.stat-title {
  color: var(--el-text-color-secondary);
}

.quick-actions {
  margin-bottom: 40px;
}

.action-card {
  cursor: pointer;
  text-align: center;
  padding: 24px;
  transition: all 0.3s;
}

.action-card:hover {
  transform: translateY(-5px);
}

.action-icon {
  font-size: 32px;
  color: var(--el-color-primary);
  margin-bottom: 16px;
}

/* 统计图标颜色 */
.primary {
  color: var(--el-color-primary);
}

.success {
  color: var(--el-color-success);
}

.warning {
  color: var(--el-color-warning);
}

.danger {
  color: var(--el-color-danger);
}
</style>